<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Chapter9</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
    <style>
        html,
        body {
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="borderstyle" id="bs1">none无边框</div>
    <div class="borderstyle" id="bs2">1个值solid</div>
    <div class="borderstyle" id="bs3">2个值 solid dashed</div>
    <div class="borderstyle" id="bs4">3个值 solid dashed double</div>
    <div class="borderstyle" id="bs5">4个值 solid dashed double dotted</div>
    <div class="borderstyle" id="bs6">groove3D</div>
    <div class="borderstyle" id="bs7">ridge3D</div>
    <div class="borderstyle" id="bs8">inset3D</div>
    <div class="borderstyle" id="bs9">outset3D</div>
    <div class="borderstyle" id="bs10">分别设定四个边</div>
<div style="clear:both"></div>
    <div id="bw1" class="borderwidth">值thin</div>
    <div id="bw2" class="borderwidth">值2px 4px</div>
    <div id="bw3" class="borderwidth">值2px 4px 6px</div>
    <div id="bw4" class="borderwidth">值2px 4px 6px 8px</div>
    <div id="bw5" class="borderwidth">分别设定4个值2px 4px 6px 8px </div>
    <div style="clear:both;"></div>
    <div id="bc1" class="bordercolor">1个颜色值</div>
    <div id="bc2" class="bordercolor">2个颜色值</div>
    <div id="bc3" class="bordercolor">3个颜色值</div>
    <div id="bc4" class="bordercolor">4个颜色值</div>
    <div id="bc5" class="bordercolor">分别设置4个颜色值</div>
    <div style="clear:both;"></div>
    <div id="b1" class="border">边框1</div>
    <div id="b2" class="border">边框2</div>
    <div style="clear:both"></div>
    <div id="p1" class="padding">顶部内边距为10px</div>
    <div id="p2" class="padding">左侧内边距为10px</div>
    <div id="p3" class="padding">三个值，内边距分别为10px 5px 10px</div>
    <div style="clear: both;"></div>
    <br><br>
    <div id="m1" class="margin">顶部外边距10px</div>
    <div id="m2" class="margin">左右外边距10px</div>
    <div id="m3" class="margin">底部外边距10px</div>
    <br>
    <div id="m4" class="margin">四边外边距20px</div>
    <div id="m5" class="margin">分别四边外边距</div>
    <div style="clear:both"></div>
    <div id="br1" class="borderradius">一次设置四角</div>
    <div id="br2" class="borderradius">分别设置对角</div>
    <div id="br3" class="borderradius">三值设置四角</div>
    <div id="br4" class="borderradius">分别设置四角</div>
    <div style="clear:both"></div>

    <div id="bs1" class="boxshadow">阴影1</div>
    <div id="bs2" class="boxshadow">阴影2</div>
    <div id="bs3" class="boxshadow">阴影3</div>
    <div id="bs4" class="boxshadow">阴影4</div>
    <div style="clear:both;"></div>

    <div class="div1">content-box属性</div>
    <div class="div2">border-box属性</div>
    <div style="clear:both;"></div>

    <div id="bi1" class="borderimage">外边框是图片</div>
    <div id="bi2" class="borderimage">外边框是图片</div>
    <div id="bi3" class="borderimage">外边框是图片</div>

    <div class="div3">块级元素</div>
    <div class="div3">块级元素2</div>
<br>
    <span class="span1">行内元素</span>
    <span class="span1">行内元素2</span>
    <span class="span1">行内元素3</span>
    <br>
    <br>
    <img src="border.png">
    <img src="border.png">
    <img src="border.png">

    <br>
    
    <span class="span2">span转换</span>
    <span class="span2">span转换</span>

    <div class="div4">div 转换</div>
    <div class="div4">div 转换</div>

    <div class="father">
        <div id="left">靠左</div>
        <div id="right">靠右</div>

    </div>

    <div class="father">
        <div id="left1">靠左</div>
        <div id="right1">靠右</div>
        <div id="static">我是不动的</div>
    </div>
    <br>
    <div id="static1" class="position"><p>div1</p></div>
    <div id="rel1" class="position">
        <p>div2</p>
        <b>b元素</b>
        <b class="b2">b元素2</b>
        <b>b元素3</b>
    </div>
    <br>

    <div id="d1" class="mydiv"><p>div1</p></div>
    <div id="d2" class="mydiv">
        <p>div2</p>
        <b>b元素1</b>
        <b class="b2">b元素2</b>
        <b>b元素3</b>
    </div>
    <div id="d3"class="mydiv"><p>div3</p></div>

    <br>
    <div id="dd1" class="dd">
        学习HTML是一件需要动手去做的事，仅靠听老师讲课来学习是行不通的，多听，多实践才是学习的正道，甚至在课外也需要通过日常的活动去学习如何正常应用课堂上所学到的知识。
    </div>
    <div id="dd2" class="dd">
        学习HTML是一件需要动手去做的事，仅靠听老师讲课来学习是行不通的，多听，多实践才是学习的正道，甚至在课外也需要通过日常的活动去学习如何正常应用课堂上所学到的知识。
    </div>
    <div id="dd3" class="dd">
        学习HTML是一件需要动手去做的事，仅靠听老师讲课来学习是行不通的，多听，多实践才是学习的正道，甚至在课外也需要通过日常的活动去学习如何正常应用课堂上所学到的知识。
    </div>
    <div id="dd4" class="dd">
        学习HTML是一件需要动手去做的事，仅靠听老师讲课来学习是行不通的，多听，多实践才是学习的正道，甚至在课外也需要通过日常的活动去学习如何正常应用课堂上所学到的知识。
    </div>

</body>

</html>